{extend name="base"}
{block name="style"}
<link rel="stylesheet" href="{:_static()}/css/common.css" media="all" />
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=7U2BZ-WT3C6-3SFSH-EPX5Z-OW3YT-C6F7A"></script>
<script type="text/babel" src="{:_static()}/components/qqMap.js"></script>

{/block}
{block name="main"}
<style type="text/css">
	.el-icon-minus,.el-icon-plus{line-height: inherit !important;}
</style>
<div id="app" v-cloak>
	<el-row class="ws-quote">
		<el-col :span="10" >
			<el-button @click="onSubmit(true,'{:url(\'del\')}',{ids:checkData})" :disabled="!checkData.length" type="danger" size="small">删除</el-button>
			<el-button type="primary" size="small" @click="addDialog=true">添加素材</el-button>
		</el-col>
		<el-col :span="14" style="text-align: right;">
			<el-form :model="params" inline label-width="0px" size="small">
				<el-form-item label="">
				    <el-input v-model="params.keyword" placeholder="搜索标题关键词" clearable></el-input>
				</el-form-item>
				<el-form-item v-if="cate.length">
					<el-select v-model="cate_id" placeholder="请选择" @change="search('{:url('')}',null,Object.assign(params,{cate_id}))">
					    <el-option
					      v-for="item of cate"
					      :key="item.id"
					      :label="item.name" 
					      :value="item.id">
					      
					    </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
				    <el-button type="primary" size="mini" @click="search('{:url('')}')">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
	<el-table @selection-change="selectionChange" :data="tableData" border stripe>
		<el-table-column type="selection" width="40"></el-table-column>
		<el-table-column prop="id" label="ID" width="70" align="center" sortable></el-table-column>
		<el-table-column prop="title" label="标题" align="left"></el-table-column>
		<el-table-column prop="remark" label="备注" align="left"></el-table-column>
		<el-table-column 
			align="left"
			:label="v.title" 
			v-for="v of currentCateOptions"
			v-if="v.value>0"
			>
		  	<template slot-scope="props">
	  			<template v-if="v.name==='map'">
	  				<template v-if="props.row.map">
		  				<p>{{props.row.map.city}}</p>
		  				<p>{{props.row.map.address}}</p>
		  				<p>lng：{{props.row.map.lng}}</p>
		  				<p>lat：{{props.row.map.lat}}</p>
	  				</template>
	  		  	</template>

	  		  	<!-- 性别 -->
	  		  	<template v-else-if="v.name==='sex'">
	  				<template v-if="props.row.sex">男</template>
	  				<template v-else>女</template>
	  		  	</template>

	  		  	<!-- 媒体文件 -->
	  		  	<template v-else-if="v.name==='media'">
	  				<template v-for="item of props.row.media">
	  			  		<img :src="imagesPrefix+item.link" v-if="item.type===1" style="width: 50px;height: 50px;margin: 0 5px;">
	  			  		<video :src="imagesPrefix+item.link" v-else-if="item.type===2" style="width: 50px;height: 50px;"></video>
	  			  		<img src="{:_static()}/images/audio.png" v-if="item.type===3" style="width: 50px;height: 50px;margin: 0 5px;">
	  		  		</template>
	  		  	</template>
				
				<!-- 其它 -->
	  		  	<template v-else>
	  		  		{{props.row[v.name]}}
	  		  	</template>
		  	</template>
		</el-table-column>
		<el-table-column label="操作" width="110" align="center">
			<template slot-scope="scope">
				<el-button type="danger" size="mini" class="ws-mini" @click="onGet('{:url(\'del\')}?id='+scope.row.id,true)">删除</el-button>

				<el-button type="primary" size="mini" class="ws-mini" @click="edit(scope.row)">编辑</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="page">{$list->render()|raw}</div>


	<!-- 添加、编辑素材 start -->
	<el-dialog :title="dialogTitle" width="500px" :visible.sync="addDialog">
		<el-form ref="forms" :model="data" :rules="rules" label-width="80px">
			<el-form-item label="标题" prop="title">
				<el-input v-model="data.title" placeholder="素材标题"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-radio-group v-model="data.status">
				    <el-radio :label="0">禁用</el-radio>
				    <el-radio :label="1">启用</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="分组">
				<el-select v-model="data.cate_id" placeholder="请选择" @change="selectCate">
				    <el-option
				      v-for="item of cate"
				      :key="item.id"
				      :label="item.name" 
				      :value="item.id">
				      
				    </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="备注">
				<el-input type="textarea" v-model="data.remark" placeholder="素材说明"></el-input>
			</el-form-item>
			<el-form-item v-show="options.length">
				<p>该分组素材属性：</p>
			</el-form-item>
			<template v-if="options.length">
				<el-form-item :label="v.title" v-for="v of options" v-if="v.value>0">
					<!-- textarea -->
					<el-input type="textarea" v-if="v.type=='textarea'" v-model="v.default" :placeholder="v.remark"></el-input>

					<!-- text -->
					<el-input type="text" v-else-if="v.type=='text'" v-model="v.default" :placeholder="v.remark"></el-input>

					<!-- radio -->
					<el-radio-group v-model="v.default" v-else-if="v.type=='radio'">
					    <el-radio :label="key.toString()" :key="key" v-for="(item,key) of v.scope">{{item}}</el-radio>
					</el-radio-group>

					<!-- number -->
					<el-input-number v-else-if="v.type=='number'" v-model="v.default" :min="0"></el-input-number>
					
					<!-- map -->
					<template v-else-if="v.type=='map'">
						<el-button type="primary" size="small" @click="qqMap=true">地图选择</el-button>
	                    <!-- 打开腾讯地图 start -->
                    	<ws-qqmap v-model="qqMap" 
                    		location-url="{:url('index/Api/qqLocation')}" 
                    		citys-url="{:url('index/Api/citys')}" 
                    		:default-latlng="[v.default.lat,v.default.lng]"
                    		@check="checkQQMapAddress">
                    	</ws-qqmap>
                    	<!-- 打开腾讯地图 end -->
	                    <p v-show="v.default.city">
	                    	<span>城市：</span>
	                    	<el-input v-model="v.default.city" readonly/>
	                    </p>
	                    <p v-show="v.default.address">
	                    	<span>地址：</span>
	                    	<el-input v-model="v.default.address" readonly/>
	                    </p>
	                    <p v-show="v.default.lng">
	                    	<span>经度：</span>
	                    	<el-input v-model="v.default.lng" readonly/>
	                    </p>
	                    <p v-show="v.default.lat">
	                    	<span>纬度：</span>
	                    	<el-input v-model="v.default.lat" readonly/>
	                    </p>
					</template>

					<!-- media -->
					<template v-else-if="v.type=='media'">
	                    <el-button type="primary" class="ws-uploads-btn" icon="el-icon-upload" style="font-size: 25px;" size="small">
	                        <input type="file" class="ws-uploads" title=" " @change="onUploads(this.event,v.media_type)">
	                    </el-button>
	                    <el-button v-if="fileList.length" type="danger" class="ws-mini" size="mini" @click="clearFiles">清空媒体文件</el-button>
	                    <!-- <ul class="ws-images" v-html="wsImagesHtml"> -->
	                        <!-- 这里是图片 -->
	                    <!-- </ul> -->
	                    <ul class="ws-images">
	                        <!-- 这里是图片 -->
	                        <li v-for="item in data.media">
							    <!-- //图片 -->
							    <img :src="imagesPrefix+item.link" v-if="item.type===1" @click="delImg(item.id)"/>
							    <!-- //视频 -->
							    <video :src="imagesPrefix+item.link" v-if="item.type===2" @click="delImg(item.id)"></video>
							    <!-- //音频 -->
							    <img src="{:_static()}/images/audio.png" v-else-if="item.type===3" @click="delImg(item.id)"/>
							</li>
	                    </ul>
					</template>

				</el-form-item>
			</template>
		</el-form>
		<div slot="footer" class="dialog-footer">
	    	<el-button @click="addDialog = false">取 消</el-button>
	    	<el-button type="primary" @click="onSubmit('forms','{:url(\'add\')}',submitData)">提 交</el-button>
	  	</div>
	</el-dialog>
	<!-- 添加、编辑素材 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script type="text/babel" type="text/javascript">
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		tableData:{$list->toJson()|raw}, // 列表数据
		checkData:[], // 选中数据
		params:{$params|json_encode|raw},
		imagesPrefix:"{:images('')}", //媒体文件路径前缀
		cate:{$cate|raw}, //所有素材分组
		cate_id:{$params.cate_id|default=0}, //当前筛选的分组ID
		currentCateOptions:{}, //当前筛选的属性
		dialogTitle:'添加素材',
		addDialog:false,
		data:{}, 
		rules:{
			title:{required:true,message:'标题不能为空'}
		},
		options:[], //添加属性

		fileList:[], //上传的图片ID
		wsImagesHtml:'',  //上传显示的图片
		mediaType:{
			image:"{:lang('image')}",
			video:"{:lang('video')}",
			audio:"{:lang('audio')}",
		},

		// 腾讯地图组件数据
		qqMap:false, //是否显示地图选择框
	},
	created(){
		this.emptyData();
		this.filterCate();
	},
	computed:{
		// 添加素材 提交数据
		submitData(){
			let options={};
			this.options.forEach(item=>{
				if(item.value>0&&item.name!=='media'){
					options[item.name]=item.default;
				}
			})
			return Object.assign(this.data,{options},{images:this.fileList});
		},
	},
	methods:{
		// 全选
		selectionChange(data){
			this.checkData=data.map(item=>{
				return item.id;
			})
		},
		emptyData(newData={}){
			this.data=Object.assign({
				title:'',
				cate_id:'',
				remark:'',
				status:1,
			},this.clone(newData));
		},
		// 腾讯地图组件 确定选择 地址事件
		checkQQMapAddress(data){
			this.options.forEach(item=>{
				if(item.name==='map'){
					item.default={
						city:data.city,
						address:data.address,
						lat:data.latLng.lat,
						lng:data.latLng.lng,
					}
				}
			})
		},
		// 选择素材分组（添加素材时）
		selectCate(id,data){
			let row=this.cate.filter(item=>{
				if(item.id===id){
					return item;
				}
			})
			if(!row[0]){
				return;
			}
			let options=JSON.parse(row[0].options);
			if(data){
				options.map(item=>{
					if(data[item.name]){
						item.default=data[item.name];
					}
					return item;
				})
				if(data.media){
					let  wsImagesHtml='',imagesPrefix=this.imagesPrefix;
					data.media.forEach(item=>{
						wsImagesHtml+=this._pushImages(imagesPrefix+item.link,item.type,'',item.id);
					})
					this.wsImagesHtml=wsImagesHtml;
				}
			}
			this.options=options;
			this.data.cate_id=row[0].id;
		},
		// 筛选分组（查询搜索时）
		filterCate(){
			if(this.cate_id===0&&this.cate[0]){
				this.cate_id=this.cate[0].id;
			}
			let id=this.cate_id;
			let row=this.cate.filter(item=>{
				if(item.id===id){
					return item;
				}
			})
			if(row[0]){
				this.currentCateOptions=JSON.parse(row[0].options);
			}
		},
		// 上传媒体文件
		onUploads(e,type){
			let file=e.target.files[0],
				mediaType=this.mediaType;
			if(file.type.indexOf(type)===-1){
				this.$message({
					message:'该分组仅允许上传'+mediaType[type]+'文件',
					type:'warning',
				});
				return;
			}
        	let formData=new FormData();
        	formData.append('file',file);
        	this.jqUpload("{:url('loads')}",formData,res=>{
        		if(res.status===0){
        			// data=res.data;
        			data=res.data;
        			delete data.src;
        			this.data.media.push(data);
        			this.submitData.images.push(data.id);
                    // // 删除按钮
                    // this.wsImagesHtml+=this._pushImages(data.src,data.type,'',data.id);
        		}
        	})
		},
		// 清空删除上传的媒体文件
		clearFiles(){
			this.wsImagesHtml='';
			this._wspost("{:url('delImages')}",{id:this.fileList},res=>{
				if(res.code){
					this.fileList=[];
				}
			},false);

		},
		edit(row){
			this.emptyData(row);
			this.selectCate(row.cate_id,row);
			this.addDialog=true;
			this.dialogTitle='素材编辑';
		},
		_pushImages(src,type,wsImagesHtml='',id){
			if(type===1){ //图片
				wsImagesHtml+=`<li><img src="${src}"  onclick="console.log(id)" /></li>`;
			}else if(type===2){ //视频
				wsImagesHtml+=`<li><video src="${src}"  console.log(id)" ></video></li>`;
			}else if(type===3){ //音频
				wsImagesHtml+=`<li><img src="{:_static()}/images/audio.png"  console.log(id)" /></li>`;
			}
			if(id){
				this.fileList.push(id);
			}
			return wsImagesHtml;
		},
		delImg:function(id){
			// var conf = confrom('确定要删除吗？');
			// if (conf) {
			// 	alert(1);
			// }
			// else{
				// alert(id);
			// }
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
		        confirmButtonText: '确定',
		        cancelButtonText: '取消',
		        type: 'warning'
		    }).then(() => {
		    	this._wspost("{:url('delImages')}",{id:id},res=>{
	        			// console.log(res);
					if(res.code){
						// 删除成功，清除已删除的多媒体文件的对应数据

	        			// data=res.data;
	        			// delete data.src;
	        			// this.data.media.push(data);
	        			// 删除媒体文件对应的数据
	        			for (var i = this.data.media.length - 1; i >= 0; i--) {
	        					// console.log(i)
	        				if(this.data.media[i].id == id){
	        					this.data.media.splice(i,1);
	        				}
	        			}
	        			// 删除媒体文件对应id
	        			for (var i = this.submitData.images.length - 1; i >= 0; i--) {
	        				if(this.submitData.images[i] == id){
	        					this.submitData.images.splice(i,1);
	        				}
	        			}
	        			// console.log(mi)
	        			// console.log(ii)
	        			// console.log(this.data.media[mi])
	        			// console.log(this.submitData.images[ii])
	        			// delete this.data.media[mi];
	        			// delete this.submitData.images[ii];
	        			// console.log(this.data.media[mi])
	        			// console.log(this.submitData.images[ii])
	        			// this.submitData.images.push(data.id);
					}
				},false);
		        // this.$message({
		        //     type: 'success',
		        //     message: '删除成功!'
		        // });
		    }).catch(() => {
		        // this.$message({
		        //     type: 'info',
		        //     // message: '已取消删除'
		        // });          
		    });
		}
	},
});
</script>
{/block}